<template>
<div class="ChartTextItem">
  <!-- <div class="item-header">
    <span class="item-title">{{data.title}}</span>
  </div> -->
  <div class="item-content">
    <div class="item-total">
      <label>{{data.totalLabel}}</label>
      <span :title="data.totalNum">{{generateNumber(data.totalNum)}}</span>
    </div>
    <div class="item-yesterday-num">
      <label>昨日：</label>
      <span>{{data.yesterdayNum}}</span>
      <span class="item-minus" :class="generateMinusClass()">{{Math.abs(Math.round(data.num * 100) - Math.round(data.yesterdayNum * 100)) / 100}}</span>
    </div>
    <div class="item-num">{{data.title}}{{data.num}}</div>
  </div>
</div>
</template>

<script>
export default {
  name: "ChartTextItem",
  props:{
    data:{
      type: Object,
      required: true
    }
  },
  methods:{
    generateMinusClass(data = this.data){
      if(data.num < data.yesterdayNum) return 'y-info';
      else if(data.num > data.yesterdayNum) return 'y-danger';
      return '';
    },
    generateNumber(num){
      if(num < 10000) return num;
      else if(num < 1000000) return (num / 10000).toFixed(1) + '万';
      else if(num < 100000000) return (num / 10000).toFixed(0) + '万';
      else if(num < 10000000000) return (num / 100000000).toFixed(1) + '亿';
      else return (num / 100000000).toFixed(0) + '亿';
    }
  }
}
</script>

<style scoped lang="less">
.ChartTextItem{
  border: @common-border;
  color: #666;
  margin-bottom: 10px;
  >.item-header{
    background: #f1f1f1;
    height: 42px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:after{
      content: '\4eca\65e5';
      display: inline-block;
    }
  }
  >.item-content{
    padding: 15px;
    font-size:14px;
    >.item-num{
      font-size: 18px;
      padding-top: 10px;
    }
    >.item-yesterday-num{
      >.item-minus:before{
        content: '+';
        padding-left: 5px;
      }
      >.item-minus.y-danger:before{
        content: '+';
      }
      >.item-minus.y-info:before{
        content: '-';
      }
    }
    >.item-total{
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
    }
  }
}
</style>